<template>
  <div class="home">
    <el-form ref="ruleform" :model="ruleform" label-width="150px">
      <!-- 商品介绍 -->
      <div class="goods-intro">
        <h3>商品介绍</h3>
        <el-form-item label="商品编号">
          <el-input v-model="ruleform.goods.goodsSn"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="ruleform.goods.name"></el-input>
        </el-form-item>
        <el-form-item label="市场售价">
          <el-input v-model="ruleform.goods.counterPrice" placeholder="0.00">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否新品" prop="isNew">
          <el-radio v-model="ruleform.goods.isNew" :label="true">新品</el-radio>
          <el-radio v-model="ruleform.goods.isNew" :label="false"
            >非新品</el-radio
          >
        </el-form-item>

        <el-form-item label="是否热卖" prop="isHot">
          <el-radio v-model="ruleform.goods.isHot" :label="false"
            >普通</el-radio
          >
          <el-radio v-model="ruleform.goods.isHot" :label="true">热卖</el-radio>
        </el-form-item>

        <el-form-item label="是否在售" prop="isOnSale">
          <el-radio v-model="ruleform.goods.isOnSale" :label="true"
            >在售</el-radio
          >
          <el-radio v-model="ruleform.goods.isOnSale" :label="false"
            >未售</el-radio
          >
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            class="avatar-uploader"
            action="/api/admin/storage/create"
            :show-file-list="false"
            :on-success="handleAvatarSuccess1"
            :before-upload="beforeAvatarUpload1"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="宣传画廊">
          <el-upload
            action="/api/admin/storage/create"
            list-type="picture-card"
            :on-remove="handleRemove"
            :on-success="handlePicturecardsuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="商品单位">
          <el-input
            v-model="ruleform.goods.unit"
            placeholder="个/件/盒"
          ></el-input>
        </el-form-item>

        <el-form-item label="关键字">
          <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="ruleform.goods.keywords"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            >+ 增加</el-button
          >
        </el-form-item>
        <el-form-item label="所属分类">
          <el-cascader
            v-model="ruleform.goods.categoryId"
            :options="options1"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChange1"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="所属品牌商">
          <el-cascader
            v-model="ruleform.goods.brandId"
            :options="options2"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChange2"
          ></el-cascader>
        </el-form-item>

        <el-form-item label="商品简介">
          <el-input v-model="ruleform.goods.brief"></el-input>
        </el-form-item>
        <el-form-item label="商品详细介绍">
          <tinymce-editor
            ref="editor"
            v-model="ruleform.goods.detail"
            :disabled="disabled"
            @onClick="onClick"
          >
          </tinymce-editor>
        </el-form-item>
      </div>
      <!-- 商品规格 -->
      <div class="goods-intro">
        <h3>商品规格</h3>
        <el-row>
          <el-col :span="10">
            <el-radio-group v-model="labelPosition" size="small">
              <el-radio-button label="1">默认标准规格</el-radio-button>
              <el-radio-button label="2">多规格支持</el-radio-button>
            </el-radio-group></el-col
          >
          <el-col :span="10"
            ><el-button
              type="primary"
              plain
              style="padding: 7px 15px"
              @click="handleAdd"
              v-if="labelPosition === '2'"
              >添加</el-button
            ></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="24" v-if="labelPosition == '2'">
            <el-table :data="spggtj" style="width: 100%">
              <el-table-column prop="specification" label="规格名">
              </el-table-column>
              <el-table-column prop="value" label="规格值">
                <template slot-scope="scope">
                  <el-tag>{{ scope.row.value }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="picUrl" label="规格图片">
                <template slot-scope="scope">
                  <img
                    v-if="scope.row.picUrl != ''"
                    :src="scope.row.picUrl"
                    alt=""
                    width="40"
                    height="40"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete1(scope.$index, scope.row)"
                    v-if="scope.row.specification != ''"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24" v-if="labelPosition == '1'">
            <el-table :data="ruleform.specifications" style="width: 100%">
              <el-table-column prop="specification" label="规格名">
              </el-table-column>
              <el-table-column prop="value" label="规格值">
                <template slot-scope="scope">
                  <el-tag
                    v-for="(item, index) in scope.row.value"
                    :key="index"
                    >{{ item }}</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column prop="picUrl" label="规格图片">
                <template slot-scope="scope">
                  <img
                    v-if="scope.row.picUrl != ''"
                    :src="scope.row.picUrl"
                    alt=""
                    width="40"
                    height="40"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <!-- 商品库存 -->
      <div class="goods-intro">
        <h3>商品库存</h3>
        <el-row>
          <el-col :span="24" v-if="labelPosition == '1'">
            <el-table :data="ruleform.products" style="width: 100%">
              <el-table-column
                label="货品规格"
                prop="specifications"
                width="780"
              >
                <template slot-scope="scope">
                  <el-tag
                    v-for="(item, index) in scope.row.specifications"
                    :key="index"
                    >{{ item }}</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column prop="price" label="货品售价" width="100">
              </el-table-column>
              <el-table-column prop="number" label="货品数量" width="100">
              </el-table-column>
              <el-table-column prop="picUrl" label="货品图片" width="100">
                <template slot-scope="scope">
                  <img
                    v-if="scope.row.url != ''"
                    :src="spkcsz1[0].url"
                    alt=""
                    width="40"
                    height="40"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleshezhi(scope.$index, scope.row)"
                    v-if="labelPosition == '1'"
                    >设置</el-button
                  >
                </template>
              </el-table-column></el-table
            >
          </el-col>
          <el-col :span="24" v-if="labelPosition == '2'">
            <el-table :data="spkcsz" style="width: 100%">
              <el-table-column
                label="货品规格"
                prop="specifications"
                width="780"
              >
                <template slot-scope="scope">
                  <el-tag
                    v-for="(item, index) in scope.row.specifications"
                    :key="index"
                    >{{ item }}</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column prop="price" label="货品售价" width="100">
              </el-table-column>
              <el-table-column prop="number" label="货品数量" width="100">
              </el-table-column>
              <el-table-column prop="url" label="货品图片" width="100">
                <template slot-scope="scope">
                  <img
                    v-if="scope.row.url != ''"
                    :src="spkcsz1[0].url"
                    alt=""
                    width="40"
                    height="40"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    v-if="scope.row.price != ''"
                    @click="handleshezhi(scope.$index, scope.row)"
                    >设置</el-button
                  >
                </template>
              </el-table-column></el-table
            >
          </el-col>
        </el-row>
      </div>
      <!-- 商品参数 -->
      <div class="goods-intro">
        <h3>商品参数</h3>
        <div>
          <el-button size="mini" type="primary" @click="handleadd1()"
            >添加</el-button
          >
        </div>
        <el-row>
          <el-col :span="24">
            <el-table :data="ruleform.attributes" style="width: 100%">
              <el-table-column
                prop="attribute"
                label="商品参数名称"
                width="545"
              >
              </el-table-column>
              <el-table-column prop="value" label="商品参数值" width="545">
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    v-if="scope.row.value"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column></el-table
            >
          </el-col>
        </el-row>
      </div>
      <!-- 按钮 -->
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <el-button @click="handleClose()">取消</el-button>
        <el-button type="primary" @click="submitForm()">上架</el-button>
      </div></el-form
    >
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form>
        <!-- 商品规格 -->
        <el-form-item
          label="规格名"
          v-if="title == '设置规格'"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="spggtj1.specification"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="规格值"
          v-if="title == '设置规格'"
          :label-width="formLabelWidth"
        >
          <el-input v-model="spggtj1.value" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="规格图片"
          v-if="title == '设置规格'"
          :label-width="formLabelWidth"
        >
          <el-upload
            class="avatar-uploader"
            action="/api/admin/storage/create "
            :show-file-list="false"
            :on-success="handleAvatarSuccess2"
            :before-upload="beforeAvatarUpload2"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 商品库存 -->
        <el-form-item
          label="货品规格列"
          v-if="title == '添加货品'"
          :label-width="formLabelWidth"
        >
          <el-tag
            v-for="(item, index) in spkcsz1[0].specifications"
            :key="index"
            >{{ item }}</el-tag
          >
        </el-form-item>
        <el-form-item
          label="货品售价"
          v-if="title == '添加货品'"
          :label-width="formLabelWidth"
        >
          <el-input v-model="spkcsz1[0].price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="货品数量"
          v-if="title == '添加货品'"
          :label-width="formLabelWidth"
        >
          <el-input v-model="spkcsz1[0].number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="货品图片"
          v-if="title == '添加货品'"
          :label-width="formLabelWidth"
        >
          <el-upload
            class="avatar-uploader"
            action="/api/admin/storage/create"
            :show-file-list="false"
            :on-success="handleAvatarSuccess3"
            :before-upload="beforeAvatarUpload3"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 商品参数 -->
        <el-form-item
          label="添加商品参数"
          v-if="title == '添加商品参数'"
          :label-width="formLabelWidth"
        >
          <el-input v-model="spcstj1.attribute" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="商品参数值"
          v-if="title == '添加商品参数'"
          :label-width="formLabelWidth"
        >
          <el-input v-model="spcstj1.value" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sgpddsbqd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TinymceEditor from "@/components/tinymce-editor/tinymce-editor";
import { spsjbl, spsjsj } from "@/api/spgl/spsj.js";

export default {
  components: {
    TinymceEditor,
  },
  data() {
    return {
      // 商品规格
      labelPosition: "1",
      // 所属分类
      value1: [],
      options1: [],
      // 所属品牌商
      value2: [],
      options2: [],
      // 富文本
      msg: " ",
      disabled: false,
      // 关键字标签
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      ruleform: {
        // 商品介绍表单
        goods: {
          name: "",
          brandId: 0,
          brief: "",
          detail: "",
          categoryId: 0,
          counterPrice: "",
          gallery: [],
          goodsSn: "",
          isHot: false,
          isNew: true,
          isOnSale: true,
          keywords: "",
          picUrl: "",
          unit: "",
        },
        // 商品参数
        attributes: [],
        // 商品库存
        products: [
          {
            id: 0,
            number: "0",
            price: "0",
            specifications: ["标准"],
            url: "",
          },
        ],
        // 商品规格/多规格
        specifications: [
          {
            picUrl: "",
            specification: "规格",
            value: ["标准"],
          },
        ],
      },
      // 商品库存设置
      spkcsz: [],
      spkcsz1: [
        {
          id: 0,
          number: "0",
          price: "0",
          specifications: [],
          url: "",
        },
      ],
      //   商品参数添加

      spcstj1: {
        attribute: "",
        value: "",
      },
      // 商品规格添加
      spggtj: [],
      spggtj1: {
        picUrl: "",
        specification: "",
        value: "",
      },

      // 商品图片
      imageUrl: "",
      // 宣传画廊
      dialogImageUrl: "",
      dialogVisible: false,
      // 模态框标签
      title: "",
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    // 取消
    handleClose() {
      this.$router.push("/goods");
    },
    // 上架
    submitForm() {
      if (this.labelPosition == "2") {
        this.ruleform.specifications = this.spggtj;
        this.ruleform.products = this.spkcsz;
      }

      spsjsj(this.ruleform).then(() => {
        this.$router.push("/goods");
      });
    },
    // 删除
    handleDelete(index) {
      this.ruleform.attributes.splice(index, 1);
    },
    handleDelete1(index) {
      this.spggtj.splice(index, 1);
      this.spkcsz1[0].specifications.splice(index, 1);
    },
    // 确定
    sgpddsbqd() {
      console.log(1111111111111111111111111111111111111111111111111111111111111111122222);
      
      if (this.title == "设置规格") {
        console.log(1111111111111111111111111111111111111,this.spcstj1);
        this.spggtj.push(this.spggtj1);
        this.spkcsz1[0].specifications.push(this.spggtj1.value);
        this.spkcsz = this.spkcsz1;
        console.log(this.spggtj, this.spkcsz);
        this.spggtj1 = {
          specification: "",
          value: "",
        };
        this.dialogFormVisible = false;
      } else if (this.title == "添加货品") {
        console.log(1111111111111111111111111111111111111,this.spcstj1);
        this.spkcsz.splice(0, 1, this.spkcsz1[0]);
        console.log(this.spkcsz);
        this.spkcsz1 = [
          {
            number: "0",
            price: "0",
          },
        ];
        this.dialogFormVisible = false;
      } else if (this.title == "添加商品参数") {
        console.log(1111111111111111111111111111111111111,this.spcstj1);
        
        this.ruleform.attributes.push(this.spcstj1);
        console.log(this.ruleform.attributes);
        this.spcstj1 = {
          attribute: "",
          value: "",
        };
        this.dialogFormVisible = false;
      }
    },
    // 商品参数添加
    handleadd1() {
      this.title = "添加商品参数";
      this.dialogFormVisible = true;

    },
    // 商品库存设置
    handleshezhi(index, row) {
      this.title = "添加货品";
      this.dialogFormVisible = true;
      // this.spkcsz = row;
      console.log(index, row);
    },
    // 商品规格添加
    handleAdd() {
      this.title = "设置规格";
      this.dialogFormVisible = true;
    },
    // 所属分类and所属品牌商
    spsjbl() {
      spsjbl().then((res) => {
        console.log(res);
        this.options1 = res.data.categoryList;
        this.options2 = res.data.brandList;
      });
    },
    // 所属分类
    handleChange1(value) {
      console.log(value);
      this.ruleform.goods.categoryId = value[value.length - 1];
    },
    // 所属品牌商
    handleChange2(value) {
      console.log(value);
      this.ruleform.goods.brandId = value[value.length - 1];
    },
    // 关键字标签
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    // 富文本 鼠标单击的事件
    onClick(e, editor) {
      console.log("Element clicked");
      console.log(e);
      console.log(editor);
    },
    onSubmit() {
      console.log("submit!");
    },
    // 商品上传图片
    handleAvatarSuccess1(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.ruleform.goods.picUrl = res.data.url;
      console.log(this.ruleform.goods.picUrl);
    },
    beforeAvatarUpload1(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess2(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.spggtj1.picUrl = res.data.url;
      console.log(this.ruleform.goods.picUrl);
    },
    beforeAvatarUpload2(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess3(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.spkcsz1[0].url = res.data.url;
      console.log(this.ruleform.goods.picUrl);
    },
    beforeAvatarUpload3(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 宣传画廊上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 宣传画廊预览
    handlePicturecardsuccess(file) {
      this.dialogImageUrl = file.url;
      this.ruleform.goods.gallery.push(file.data.url);
      console.log(this.ruleform.goods.gallery);

      // this.dialogVisible = true;
    },
  },
  mounted() {
    this.spsjbl();
  },
};
</script>

<style lang="scss" scoped>
.home::v-deep {
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
.goods-intro {
  padding: 20px;

  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
//商品介绍
.el-form {
  padding: 20px;
}
// 关键字标签
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  background-color: #409eff;
  color: #fff;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>